<script type="text/x-template" id="animatedartwork-view">
    <div class="animated" v-bind:vid="app.hashCode(video).toString()" v-if="video">
        <video ref="video" class="animated-artwork-video" loop id="animated-artwork"></video>
    </div>
</script>

<script>
  Vue.component('animatedartwork-view', {
    template: '#animatedartwork-view',
    data: function() {
      return {
        app: this.$root,
        hls: null,
      }
    },
    props: {
      video: {
        type: String,
        required: true
      },
      priority: {
        type: Boolean,
        default: false
      }
    },
    async mounted() {
      if (!this.priority && app.cfg.visual.animated_artwork == "limited") {
        return
      } else if (app.cfg.visual.animated_artwork == "disabled") {
        return
      }
      if (this.video) {
        this.$nextTick(function() {
          var config = {
            backBufferLength: 0,
            enableWebVTT: false,
            enableCEA708Captions: false,
            emeEnabled: false,
            abrEwmaDefaultEstimate: 10000,
            testBandwidth: false,
          };
          if (this.hls) {
            this.hls.detachMedia();
          } else {

            this.hls = new CiderHls(config);
          }
          // bind them together
          if (this.$refs.video) {
            let d = "WIDEVINE_SOFTWARE"
            let h = {
              initDataTypes: ["cenc", "keyids"],
              distinctiveIdentifier: "optional",
              persistentState: "required"
            }
            let p = {
              platformInfo: { requiresCDMAttachOnStart: !0, maxSecurityLevel: d, keySystemConfig: h },
              appData: { serviceName: "Apple Music" }
            }

            this.hls.attachMedia(this.$refs.video);
            this.hls.loadSource(this.video, p);
            let u = this.hls;
            var quality = app.cfg.visual.animated_artwork_qualityLevel;
            setTimeout(() => {
              let levelsnum = u.levels.map((level) => {
                return level.width
              })
              if (levelsnum.length > 0) {
                let qualities = []
                let qualities2 = []
                for (let i = 0; i < levelsnum.length; i++) {
                  if (qualities2.indexOf(levelsnum[i]) == -1) {
                    qualities.push({ level: i, quality: levelsnum[i] })
                    qualities2.push(levelsnum[i])
                  }
                }
                let actualnum = Math.floor(qualities[qualities.length - 1].level * (quality / 4))
                if (quality != 0) {
                  quality = qualities[Math.min(actualnum, qualities.length - 1)].level
                }
                if (quality == 4) {
                  quality = qualities[qualities.length - 1].level
                }
              }
              try {
                this.hls.loadLevel = parseInt(quality || 1);
              } catch (e) {
              }
            }, 200)
          }
        })
      }
    },
    async beforeDestroy() {
      if (this.hls) {
        await this.hls.destroy();
        this.hls = null
      }
    }
  });
</script>
